<template>
  <div v-loading="isLoading">
    <div class="weather_container">
      <div class="BAC-title" style="height: 68px;font-size: 24px;">水上桥区管控专题</div>
      <div class="filter" v-if="swqktype == 'bridge'">
        <el-select
          v-model="bridgeValue"
          filterable
          placeholder="请选择"
          style="width: 100%"
          @change="setBridgeVal"
        >
          <el-option
            v-for="item in bridgeOption"
            :key="item.name || item.point"
            :label="item.name || item.point"
            :value="item.name || item.point"
          />
        </el-select>
      </div>
      <div class="filter" v-else>
        <el-select
          v-model="waterPoint"
          filterable
          placeholder="所属区域中心"
          style="width: 100%"
          @change="setBridgeVal"
        >
          <el-option
            v-for="item in bridgeOption"
            :key="item.name || item.point"
            :label="item.name || item.point"
            :value="item.name || item.point"
          />
        </el-select>
      </div>
      <div class="content-container">
        <div class="content">
          <div class="title">水位信息</div>
          <div class="content-swxx">
            <div class="swxx-info">
              <div class="info-time">
                更新时间: {{ bgWaterSitData?.time || "--" }}
              </div>
              <div class="info-sssw">
                <div class="sssw-left">实时水位</div>
                <div class="sssw-right">
                  {{ bgWaterSitData?.swz || "--" }}米
                </div>
              </div>
              <div class="info-bottom">国家1985高程基准</div>
            </div>
            <div class="swxx-qk">
              <div class="swxx-qk-item">
                <div class="qk-item1">
                  {{ theHighLowData[0]?.swz?.toFixed(1) || "--" }}米
                </div>
                <div class="qk-item2">历史最高水位</div>
                <div class="qk-item3">时间</div>
                <div class="qk-item4">
                  {{ theHighLowData[0]?.time || "--" }}
                </div>
              </div>
              <div class="swxx-qk-item">
                <div class="qk-item1">
                  {{ theHighLowData[1]?.swz?.toFixed(1) || "--" }}米
                </div>
                <div class="qk-item2">历史最低水位</div>
                <div class="qk-item3">时间</div>
                <div class="qk-item4">
                  {{ theHighLowData[1]?.time || "--" }}
                </div>
              </div>
            </div>
            <div class="predict" v-if="swqktype == 'channel'">
              <div class="predict-item">
                <div class="name">较上月最高</div>
                <div 
                  class="value"
                  :style="nLastmonthHighWater1? nLastmonthHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#262626'"
                >
                  {{ nLastmonthHighWater1? nLastmonthHighWater1 : "--" }}米
                  <img 
                    src="../../../static/images/bridgeAreaControl/down-sanjiao.png" 
                    v-show="nLastmonthHighWater1 && nLastmonthHighWater1 > 0"
                  >
                  <img 
                    src="../../../static/images/bridgeAreaControl/top-sanjiao.png" 
                    v-show="nLastmonthHighWater1 && nLastmonthHighWater1 < 0"
                  >
                </div>
              </div>
              <div class="predict-item">
                <div class="name">较去年最高</div>
                <div 
                  class="value"
                  :style="nLastyearHighWater1? nLastyearHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#262626'"
                >
                  {{ nLastyearHighWater1? nLastyearHighWater1 : "--" }}米
                  <span v-show="nLastyearHighWater1 && nLastyearHighWater1 > 0"></span>
                  <img 
                    src="../../../static/images/bridgeAreaControl/down-sanjiao.png" 
                    v-show="nLastyearHighWater1 && nLastyearHighWater1 > 0"
                  >
                  <img 
                    src="../../../static/images/bridgeAreaControl/top-sanjiao.png" 
                    v-show="nLastyearHighWater1 && nLastyearHighWater1 < 0"
                  >
                </div>
              </div>
              <div class="predict-item">
                <div class="name">较历史最高</div>
                <div 
                  class="value"
                  :style="nHisHighWater1? nHisHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#262626'"
                  >
                  {{ nHisHighWater1? nHisHighWater1 : "--" }}米
                  <img 
                    src="../../../static/images/bridgeAreaControl/down-sanjiao.png" 
                    v-show="nHisHighWater1 && nHisHighWater1 > 0"
                  >
                  <img 
                    src="../../../static/images/bridgeAreaControl/top-sanjiao.png" 
                    v-show="nHisHighWater1 && nHisHighWater1 < 0"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">当日水位监测</div>
          <div id="lineChart1" class="echarts"></div>
        </div>
        <div class="content">
          <div class="title">每日八时水位情况</div>
          <div id="lineChart2" class="echarts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

// 引入api
import {
  getBridgeList,
  bgWaterSit,
  theHighLow,
  bgRecentWater,
  recentOneDay,
  getWaterPoint,
  HDtheHighLow,
  getNewWater,
  HDbgRecentWater,
  HDrecentOneDay,
  waterPredict,
} from "../../../utils/bridgeAreaControlApi";
import { useRouter } from "vue-router";
const router = useRouter();

const xAxisData1 = ref([]);
const xAxisData2 = ref([]);
const seriesData1 = ref([]);
const seriesData2 = ref([]);
const bridgeValue = ref("");
const setBridgeVal = (val) => {
  bridgeValue.value = val;
  getData();
};
const bridgeOption = ref([]);
const isLoading = ref(false);
const loadingNum = ref(0);
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
    loadingNum.value = 0;
  }
};
const getBridgeListDataFn = () => {
  return new Promise((resolve, reject) => {
    getBridgeList({
      keyword: bridgeValue.value
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        resolve(res.data);
      }
    });
  });
};
const waterPoint = ref("");
const HDgetBridgeListDataFn = () => {
  return new Promise((resolve, reject) => {
    getWaterPoint({
      waterway: bridgeValue.value
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        waterPoint.value = res.data[0].point;
        resolve(res.data);
      }
    });
  });
};
const bgWaterSitData = ref({});
const getbgWaterSitFn = () => {
  showLoading();
  bgWaterSit({ bridge: bridgeValue.value })
    .then((res) => {
      if (res.code === 200) {
        bgWaterSitData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getgetNewWaterFn = () => {
  showLoading();
  getNewWater({ waterway: waterPoint.value })
    .then((res) => {
      if (res.code === 200) {
        bgWaterSitData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const theHighLowData = ref([]);
const gettheHighLowFn = () => {
  showLoading();
  theHighLow({ bridge: bridgeValue.value })
    .then((res) => {
      if (res.code === 200) {
        theHighLowData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getHDtheHighLowFn = () => {
  showLoading();
  HDtheHighLow({ waterway: waterPoint.value })
    .then((res) => {
      if (res.code === 200) {
        theHighLowData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getbgRecentWaterFn = () => {
  showLoading();
  bgRecentWater({ bridge: bridgeValue.value })
    .then((res) => {
      if (res.code === 200) {
        res.data?.forEach((item1) => {
          xAxisData2.value.push(item1.time);
          seriesData2.value.push(item1.swz);
        });
        nextTick(() => {
          initLineChart2();
        });
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const HDgetbgRecentWaterFn = () => {
  showLoading();
  HDbgRecentWater({ waterway: waterPoint.value })
    .then((res) => {
      if (res.code === 200) {
        res.data?.forEach((item1) => {
          xAxisData2.value.push(item1.time);
          seriesData2.value.push(item1.swz);
        });
        nextTick(() => {
          initLineChart2();
        });
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getrecentOneDayFn = () => {
  showLoading();
  recentOneDay({ bridge: bridgeValue.value })
    .then((res) => {
      if (res.code === 200) {
        res.data?.forEach((item1) => {
          xAxisData1.value.push(item1.time.slice(11, 16));
          seriesData1.value.push(item1.swz);
        });
        nextTick(() => {
          initLineChart1();
        });
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const nLastmonthHighWater1 = ref(null);
const nLastyearHighWater1 = ref(null);
const nHisHighWater1 = ref(null);
const waterPredictFn = () => {
  waterPredict({
    waterway: waterPoint.value
  }).then((res) => {
    if(res.code === 200){
      nLastmonthHighWater1.value = res.data.nLastmonthHighWater;
      nLastyearHighWater1.value = res.data.nLastyearHighWater;
      nHisHighWater1.value = res.data.nHisHighWater;
    }
  });
};
const HDgetrecentOneDayFn = () => {
  showLoading();
  HDrecentOneDay({ waterway: waterPoint.value })
    .then((res) => {
      if (res.code === 200) {
        res.data?.forEach((item1) => {
          xAxisData1.value.push(item1.time.slice(11, 16));
          seriesData1.value.push(item1.swz);
        });
        nextTick(() => {
          initLineChart1();
        });
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getData = () => {
  xAxisData1.value = [];
  xAxisData2.value = [];
  seriesData1.value = [];
  seriesData2.value = [];
  if (swqktype.value == "bridge") {
    getbgWaterSitFn();
    gettheHighLowFn();
    getrecentOneDayFn();
    getbgRecentWaterFn();
  } else {
    getgetNewWaterFn();
    getHDtheHighLowFn();
    HDgetrecentOneDayFn();
    HDgetbgRecentWaterFn();
    waterPredictFn();
  }
};

const initLineChart1 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart1")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart1"));

  let option;
  if(xAxisData1.value.length === 0){
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          color: "#8c8c8c",
          fontSize: 12,
          fontWeight: 500
        }
      }
    };
  }else{
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "35px",
        right: "30px",
        bottom: "45px",
      },
      xAxis: {
        type: "category",
        // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data: xAxisData1.value,
        // name: "月份",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        axisLabel: {
          interval: 0,
          rotate: -45, //倾斜的程度
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "水位值",
          data: seriesData1.value,
          type: "line",
          color: "#6B9BFD",
        },
      ],
    };
  }
  option && lineChart.setOption(option);
};
const initLineChart2 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart2")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart2"));

  let option;
  if(xAxisData2.value.length === 0){
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          color: "#8c8c8c",
          fontSize: 12,
          fontWeight: 500
        }
      }
    };
  }else{
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "35px",
        right: "45px",
        bottom: "60px",
      },
      xAxis: {
        type: "category",
        // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data: xAxisData2.value,
        // name: "月份",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        axisLabel: {
          interval: 0,
          rotate: -45, //倾斜的程度
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "水位值",
          data: seriesData2.value,
          type: "line",
          color: "#4ED9A0",
        },
      ],
    };
  }
  option && lineChart.setOption(option);
};
const swqktype = ref("bridge");
onMounted(async () => {
  isLoading.value = true;
  let routerData = router?.currentRoute?.value?.query;
  let bridge = routerData?.bridge;
  bridgeValue.value = bridge;
  swqktype.value = routerData?.type;
  if (swqktype.value == "bridge") {
    bridgeOption.value = await getBridgeListDataFn();
  } else {
    bridgeOption.value = await HDgetBridgeListDataFn();
  }  
  getData();
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
// 水位信息
.content-swxx {
  padding: 16px 20px;
  box-sizing: border-box;
  .swxx-info {
    width: 100%;
    height: 128px;
    padding: 0 20px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #1f91ff 0%, #0473de 100%);
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    .info-time {
      color: rgba(255, 255, 255, 0.85);
      line-height: 20px;
      font-size: 14px;
      margin-top: 16px;
      img {
        width: 12px;
        height: 12px;
      }
    }

    .info-sssw {
      display: flex;
      height: 32px;
      justify-content: space-between;
      align-items: center;
      .sssw-left {
        font-size: 16px;
        color: #ffffff;
        img {
          width: 32px;
          height: 32px;
        }
      }

      .sssw-right {
        font-weight: bold;
        color: #ffffff;
        font-size: 24px;
      }
    }

    .info-bottom {
      margin-top: 16px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
  }
  .swxx-qk {
    display: flex;
    justify-content: space-between;
    .swxx-qk-item {
      .qk-item1 {
        margin-top: 16px;
        font-size: 24px;
        font-weight: bold;
        color: #266fe8;
        img {
          width: 28px;
          height: 28px;
        }
      }

      .qk-item2 {
        margin-top: 2px;
        line-height: 22px;
        font-weight: 500;
        color: #595959;
      }

      .qk-item3 {
        color: #8c8c8c;
        font-size: 14px;
        margin-top: 8px;
      }

      .qk-item4 {
        color: #262626;
        font-size: 14px;
        img {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
  .predict{
    display: flex;
    margin-top: 16px;
    .predict-item{
      width: 33.33%;
      .name{
        color: #8C8C8C;
      }
      .value{
        display: flex;
        align-items: center;
        img{
          width: 14px;
          height: 14px;
        }
      }
    }
  }
}
.weather_container {
  height: 100vh;
  overflow: hidden;
  .filter {
    display: flex;
    margin: 0px 0px 16px 0px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 10;
    padding: 5px 20px;
    box-sizing: border-box;
    .selectClass {
      width: calc(50% - 5px);
    }
    .selectClass:nth-child(1) {
      margin-right: 10px;
    }
  }
  margin: 0 16px;
  .content-container {
    margin-top: 125px;
    overflow-y: scroll;
    height: calc(100vh - 68px - 80px);
  }
  .content {
    background: #ffffff;
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    .title {
      display: flex;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      font-size: 14px;
    }
    .echarts {
      height: 316px;
    }
  }
}
.BAC-title {
  width: 100%;
  font-size: 24px;
  line-height: 68px;
  background: rgba(49, 118, 233, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../../../static/images/bridgeAreaControl/bg_zhuanti.png")
    no-repeat;
  background-size: cover;
}
::v-deep.van-field {
  background-color: #f8f9fb;
  border-radius: 8px;
}
</style>
